<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>悦听player</title>
    <!-- 样式 -->
    <link rel="stylesheet" href="./css/20210419-1index.css">
</head>

<body>
<div class="wrap">
    <!-- 播放器主体区域 -->
    <div class="play_wrap" id="player">
        <div class="search_bar">
            <img src="images/player_title.png" alt=""/>
            <!-- 搜索歌曲 -->
            <input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic"/>
        </div>
        <div class="center_con">
            <!-- 搜索歌曲列表 -->
            <div class='song_wrapper'>
                <ul class="song_list">
                    <li v-for="item in musiclist"><a href="javascript:;" @click="playMusic(item.id)"></a>
                        <b>{{item.name}}</b>
                        <span><i></i></span>
                    </li>
                </ul>
                <img src="images/line.png" class="switch_btn" alt="">
            </div>
            <!-- 歌曲信息容器 -->
            <div class="player_con" :class="{playing:isplay}">
                <img src="images/player_bar.png" class="play_bar"/>
                <!-- 黑胶碟片 -->
                <img src="images/disc.png" class="disc autoRotate"/>
                <img :src="imageUrl" class="cover autoRotate"/>  <!--显示歌曲对应图片-->
            </div>
            <!-- 评论容器 -->
            <div class="comment_wrapper">
                <h5 class='title'>热门留言</h5>
                <div class='comment_list'>
                    <dl v-for="item in comment">
                        <dt><img :src="item.user.avatarUrl" alt=""></dt>   <!--用户头像，区别于音乐图片显示，在v-for里可以直接取到地址，因为取到的已经是数组了
              相当于在静态的数组里取地址，而imageUrl是在网页上取动态的地址-->
                        <dd class="name">{{item.user.nickname}}</dd>
                        <dd class="detail">
                            {{item.content}}
                        </dd>
                    </dl>
                </div>
                <img src="images/line.png" class="right_line">
            </div>
        </div>
        <div class="audio_con">
            <audio ref='audio' @play="playimage" @pause="pauseimage" :src="musicUrl" controls autoplay loop
                   class="myaudio"></audio>
        </div>
        <div class="video_con" style="display: none;">
            <video controls="controls"></video>
            <div class="mask"></div>
        </div>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./js/20210419-1main.js"></script>

</body>

</html>